<template>
  <div>
    <el-card class="box-card">
      <el-form ref="form" :model="form" label-width="120px">
        <el-divider content-position="left">基础设置</el-divider>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="是否启用查询" prop="sfcx">
              <el-radio-group v-model="form.sfcx">
                <el-radio
                  v-for="item in this.dict.state_type"
                  :key="item.id"
                  :label="item.value"
                >{{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否启用设置" prop="sfsz">
              <el-radio-group v-model="form.sfsz">
                <el-radio
                  v-for="item in this.dict.state_type"
                  :key="item.id"
                  :label="item.value"
                >{{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否显示更多" prop="isMore">
              <el-radio-group v-model="form.isMore">
                <el-radio
                  v-for="item in this.dict.whether_type"
                  :key="item.id"
                  :label="item.value"
                >{{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否显示图标" prop="isShowImage">
              <el-radio-group v-model="form.isShowImage">
                <el-radio
                  v-for="item in this.dict.whether_type"
                  :key="item.id"
                  :label="item.value"
                >{{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开启定时任务" prop="sfdsrw">
              <el-radio-group v-model="form.sfdsrw">
                <el-radio
                  v-for="item in this.dict.state_type"
                  :key="item.id"
                  :label="item.value"
                >{{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="间隔时间（秒）"
              prop="jgsj"
            >
              <el-input-number v-model="form.jgsj" placeholder="单位（秒）" :min="20" style="width: 180px" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider content-position="left">列表设置</el-divider>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="数据来源" prop="dataType">
              <el-radio-group v-model="form.dataType">
                <el-radio-button :label="1">数据库查询</el-radio-button>
                <el-radio-button :label="2">API接口查询</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="显示条数"
              prop="xsts"
            >
              <el-input-number v-model="form.xsts" :min="1" style="width: 180px" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-tabs type="border-card">
              <el-tab-pane label="基础设置">
                <el-row :gutter="10">
                  <el-col :span="8">
                    <el-form-item label="更多查询地址" prop="openType">
                      <el-radio-group v-model="form.openType">
                        <el-radio label="false">默认地址</el-radio>
                        <el-radio label="true">自定义地址</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                  <el-col v-if="form.openType =='true'" :span="24">
                    <el-form-item label="查询地址" prop="moreUrl">
                      <el-input v-model="form.moreUrl" placeholder="请输入查询跳转地址" />
                    </el-form-item>
                  </el-col>
                  <el-col v-show="form.dataType == 1" :span="8">
                    <el-form-item label="请选择数据源" prop="dataSource">
                      <el-select v-model="form.dataSource" placeholder="请选择数据源">
                        <el-option
                          v-for="item in dataSources"
                          :key="item.id"
                          :label="item.name"
                          :value="item.dataCode"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col v-if="form.dataType == 1" :span="24">
                    <el-form-item label="查询sql" prop="querySql">
                      <el-input
                        v-model="form.querySql"
                        type="textarea"
                        :rows="2"
                        placeholder="请以输入sql语句，注意sql请以where 1 = 1 结束 或者 where 1=1 and xxx 结束"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col v-if="form.dataType == 2" :span="8">
                    <el-form-item label="api地址" prop="apiUrl">
                      <el-input v-model="form.apiUrl" placeholder="请输入apiURL地址" />
                    </el-form-item>
                  </el-col>
                  <el-col v-if="form.dataType == 2" :span="8">
                    <el-form-item label="api页码字段" prop="apiCurrentName">
                      <el-input v-model="form.apiCurrentName" placeholder="请输入API页码属性字段" />
                    </el-form-item>
                  </el-col>
                  <el-col v-if="form.dataType ==2 " :span="8">
                    <el-form-item label="api条数字段" prop="apiRowsName">
                      <el-input v-model="form.apiRowsName" placeholder="请输入API分页条数属性字段" />
                    </el-form-item>
                  </el-col>
                  <el-col v-if="form.dataType == 2" :span="8">
                    <el-form-item label="请求方式" prop="requestMethod">
                      <el-select v-model="form.requestMethod" placeholder="请选择请求方式">
                        <el-option
                          v-for="item in dict.request_method"
                          :key="item.id"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col v-if="form.dataType == 2" :span="8">
                    <el-form-item label="数据类型" prop="contentType">
                      <el-select v-model="form.contentType" placeholder="请选择请求类型">
                        <el-option
                          v-for="item in dict.content_type"
                          :key="item.id"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-tab-pane>
              <el-tab-pane label="显示设置">
                <el-row
                  v-for="(domain,index) in form.xsx"
                  :key="domain.key"
                  :gutter="10"
                  style="border-bottom: 1px solid #f3f3f3;margin-top: 5px"
                >
                  <el-col :span="8">
                    <el-form-item label="显示名称" :prop="'xsx.'+index+'.title'">
                      <el-input
                        v-model="domain.title"
                        placeholder="显示名称"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="对应字段" :prop="'xsx.'+index+'.fieId'">
                      <el-input
                        v-model="domain.fieId"
                        placeholder="对应字段"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="显示宽度" :prop="'xsx.'+index+'.width'">
                      <el-input
                        v-model="domain.width"
                        placeholder="显示宽度"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="是否显示" :prop="'xsx.'+index+'.enable'">
                      <el-radio-group v-model="domain.enable">
                        <el-radio label="true">启用</el-radio>
                        <el-radio label="false">禁用</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="是否查询" :prop="'xsx.'+index+'.isQuery'">
                      <el-radio-group v-model="domain.isQuery">
                        <el-radio label="true">是</el-radio>
                        <el-radio label="false">否</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8" style="text-align: right">
                    <el-button-group>
                      <el-button type="primary" icon="el-icon-remove" @click="removeDomain(domain)">删除</el-button>
                      <el-button type="primary" icon="el-icon-circle-plus" @click="addDomain">新增</el-button>
                    </el-button-group>
                  </el-col>
                </el-row>
              </el-tab-pane>
              <el-tab-pane label="权限&排序设置">
                <el-row :gutter="10">
                  <el-col :span="8">
                    <el-form-item label="是否启用权限" prop="qxlx">
                      <el-radio-group v-model="form.qxlx">
                        <el-radio
                          v-for="item in this.dict.state_type"
                          :key="item.id"
                          :label="item.value"
                        >{{ item.label }}
                        </el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                  <el-col :span="16">
                    <el-form-item label="关联权限字段" prop="qxzd">
                      <el-input v-model="form.qxzd" placeholder="权限字段即存储用户账号的字段" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="是否自定义排序" prop="sfzdypx">
                      <el-radio-group v-model="form.sfzdypx">
                        <el-radio label="true">是</el-radio>
                        <el-radio label="false">否</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                  <el-col v-if="form.sfzdypx=='true'" :span="8">
                    <el-form-item label="请选择排序字段" prop="orderColumn">
                      <el-select v-model="form.orderColumn" placeholder="请选择排序字段">
                        <el-option
                          v-for="item in fieIdList"
                          :key="item.key"
                          :label="item.title"
                          :value="item.fieId"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col v-if="form.sfzdypx=='true'" :span="8">
                    <el-form-item label="请选择排序方式" prop="orderType">
                      <el-select v-model="form.orderType" placeholder="请选择排序方式">
                        <el-option
                          v-for="item in orderType"
                          :key="item.key"
                          :label="item.name"
                          :value="item.value"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-tab-pane>
            </el-tabs>
          </el-col>
        </el-row>
        <el-divider content-position="left">详情页设置</el-divider>
        <el-row :gutter="10">
          <el-col :span="24">
            <el-tabs type="border-card">
              <el-tab-pane label="基础设置">
                <el-row :gutter="10">
                  <el-col :span="8">
                    <el-form-item label="详情查询方式" prop="entity.queryType">
                      <el-select v-model="form.entity.queryType" placeholder="详情查询方式">
                        <el-option
                          v-for="item in entityQueryType"
                          :key="item.key"
                          :label="item.name"
                          :value="item.value"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="16">
                    <el-form-item label="详情页打开方式" prop="entity.entityType">
                      <el-radio-group v-model="form.entity.entityType">
                        <el-radio :label="1">文件下载</el-radio>
                        <el-radio :label="2">文件预览</el-radio>
                        <el-radio :label="3">地址跳转</el-radio>
                        <el-radio :label="4">定制页面</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="10">
                  <el-col :span="8">
                    <el-form-item label="选择列表字段" prop="entity.entityColumn">
                      <el-select v-model="form.entity.entityColumn" placeholder="选择列表字段">
                        <el-option
                          v-for="item in fieIdList"
                          :key="item.key"
                          :label="item.title"
                          :value="item.fieId"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="是否权限控制" prop="entity.sfqxkz">
                      <el-radio-group v-model="form.entity.sfqxkz">
                        <el-radio label="false">启用</el-radio>
                        <el-radio label="true">禁用</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="关联权限字段" prop="entity.qxzd">
                      <el-input v-model="form.entity.qxzd" placeholder="权限字段即存储用户账号的字段" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="详情地址" prop="entity.openUrl">
                      <el-input v-model="form.entity.openUrl" placeholder="详情地址" />
                    </el-form-item>
                  </el-col>
                  <el-col v-if="form.entity.entityType == 2" :span="8">
                    <el-form-item label="文档类型" prop="entity.wdlx">
                      <el-radio-group v-model="form.entity.wdlx">
                        <el-radio v-for="item in wdlxs" :key="item.key" :label="item.value">{{ item.name }}</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                  <el-col v-if="form.entity.entityType == 2" :span="16">
                    <el-form-item label="文件格式" prop="entity.fileType">
                      <el-radio-group v-model="form.entity.fileType">
                        <el-radio v-for="item in fileTypes" :key="item.key" :label="item.value">{{ item.name }}
                        </el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-tab-pane>
              <el-tab-pane v-if="form.entity.queryType == 1" label="查询设置">
                <el-row :gutter="10">
                  <el-col v-show="form.dataType == 1" :span="8">
                    <el-form-item label="请选择数据源" prop="entity.dataSource">
                      <el-select v-model="form.entity.dataSource" placeholder="请选择数据源">
                        <el-option
                          v-for="item in dataSources"
                          :key="item.id"
                          :label="item.name"
                          :value="item.dataCode"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col v-show="form.dataType == 1" :span="8">
                    <el-form-item label="是否执行更新" prop="entity.sfgx">
                      <el-radio-group v-model="form.entity.sfgx">
                        <el-radio label="true">是</el-radio>
                        <el-radio label="false">否</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                  <el-col v-if="form.dataType == 1" :span="24">
                    <el-form-item label="查询sql" prop="entity.querySql">
                      <el-input
                        v-model="form.entity.querySql"
                        type="textarea"
                        :rows="2"
                        placeholder="请以输入sql语句，注意sql请以where 1 = 1 结束 或者 where 1=1 and xxx 结束"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col v-if="form.entity.sfgx== 'true'" :span="24">
                    <el-form-item label="执行更新语句" prop="entity.updateSql">
                      <el-input
                        v-model="form.entity.updateSql"
                        type="textarea"
                        :rows="2"
                        placeholder="请以输入sql语句，注意sql请以where 1 = 1 结束 或者 where 1=1 and xxx 结束"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col v-if="form.dataType == 2" :span="8">
                    <el-form-item label="api地址" prop="entity.apiUrl">
                      <el-input v-model="form.entity.apiUrl" placeholder="请输入apiURL地址" />
                    </el-form-item>
                  </el-col>
                  <el-col v-if="form.dataType == 2" :span="8">
                    <el-form-item label="请求方式" prop="entity.requestMethod">
                      <el-select v-model="form.entity.requestMethod" placeholder="请选择请求方式">
                        <el-option
                          v-for="item in dict.request_method"
                          :key="item.id"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col v-if="form.dataType == 2" :span="8">
                    <el-form-item label="数据类型" prop="entity.contentType">
                      <el-select v-model="form.entity.contentType" placeholder="请选择请求类型">
                        <el-option
                          v-for="item in dict.content_type"
                          :key="item.id"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-tab-pane>
              <el-tab-pane v-if="form.entity.queryType == 1 && form.entity.entityType == 4" label="显示设置">
                <el-row :gutter="10">
                  <el-col :span="8">
                    <el-form-item label="标题字段" prop="entity.title">
                      <el-input v-model="form.entity.title" placeholder="标题字段" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="日期字段" prop="entity.xsrq">
                      <el-input v-model="form.entity.xsrq" placeholder="日期字段" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="部门字段" prop="entity.xsbm">
                      <el-input v-model="form.entity.xsbm" placeholder="部门字段" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="用户字段" prop="entity.xsyh">
                      <el-input v-model="form.entity.xsyh" placeholder="用户字段" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="访问次数" prop="entity.fwcs">
                      <el-input v-model="form.entity.fwcs" placeholder="用户字段" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="正文字段" prop="entity.xszw">
                      <el-input v-model="form.entity.xszw" placeholder="日期字段" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="是否有附件" prop="entity.sfyfj">
                      <el-radio-group v-model="form.entity.sfyfj">
                        <el-radio label="true">是</el-radio>
                        <el-radio label="false">否</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-tab-pane>
              <el-tab-pane v-if="form.entity.sfyfj =='true' && form.entity.entityType == 4" label="附件设置">
                <el-row :gutter="10">
                  <el-col v-show="form.dataType == 1" :span="8">
                    <el-form-item label="请选择数据源" prop="newsFj.dataSource">
                      <el-select v-model="form.newsFj.dataSource" placeholder="请选择数据源">
                        <el-option
                          v-for="item in dataSources"
                          :key="item.id"
                          :label="item.name"
                          :value="item.dataCode"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col v-if="form.dataType == 1" :span="24">
                    <el-form-item label="查询sql" prop="newsFj.querySql">
                      <el-input
                        v-model="form.newsFj.querySql"
                        type="textarea"
                        :rows="2"
                        placeholder="请以输入sql语句，注意sql请以where 1 = 1 结束 或者 where 1=1 and xxx 结束"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col v-if="form.dataType == 2" :span="8">
                    <el-form-item label="api地址" prop="newsFj.apiUrl">
                      <el-input v-model="form.newsFj.apiUrl" placeholder="请输入apiURL地址" />
                    </el-form-item>
                  </el-col>
                  <el-col v-if="form.dataType == 2" :span="8">
                    <el-form-item label="请求方式" prop="newsFj.requestMethod">
                      <el-select v-model="form.newsFj.requestMethod" placeholder="请选择请求方式">
                        <el-option
                          v-for="item in dict.request_method"
                          :key="item.id"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col v-if="form.dataType == 2" :span="8">
                    <el-form-item label="数据类型" prop="newsFj.contentType">
                      <el-select v-model="form.newsFj.contentType" placeholder="请选择请求类型">
                        <el-option
                          v-for="item in dict.content_type"
                          :key="item.id"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="附件地址字段" prop="newsFj.fjdz">
                      <el-input v-model="form.newsFj.fjdz" placeholder="部门字段" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="附件类型字段" prop="newsFj.fjlx">
                      <el-input v-model="form.newsFj.fjlx" placeholder="附件类型字段" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="是否权限控制" prop="newsFj.sfqxkz">
                      <el-radio-group v-model="form.newsFj.sfqxkz">
                        <el-radio label="false">启用</el-radio>
                        <el-radio label="true">禁用</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="关联权限字段" prop="newsFj.qxzd">
                      <el-input v-model="form.newsFj.qxzd" placeholder="权限字段即存储用户账号的字段" />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-tab-pane>
            </el-tabs>
          </el-col>
        </el-row>
        <div class="custom-button">
          <el-button type="primary" size="small" :loading="loading" icon="el-icon-circle-check" @click="saveEntity">保存
          </el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import crudDataSource from '@/api/system/dataSource';
import { adminQueryTemplate, adminSaveOrUpdate } from '@/api/template/newsList';

export default {
  name: 'NewList',
  props: {
    template: {
      type: Number,
      require: true
    }
  },
  // 数据字典
  dicts: ['state_type', 'whether_type', 'dept_auth', 'request_method', 'content_type'],
  data() {
    return {
      loading: false,
      name: '',
      dataSources: [],
      fieIdList: [],
      orderType: [{
        name: '升序',
        value: 'ASC',
        key: 1
      }, {
        name: '降序',
        value: 'DESC',
        key: 2
      }],
      wdlxs: [{
        name: '外部文档',
        value: 1,
        key: 1
      }, {
        name: '内部文档',
        value: 2,
        key: 2
      }],
      entityQueryType: [{
        name: '列表传参查询',
        value: 1,
        key: 1
      }, {
        name: '列表传参跳转',
        value: 2,
        key: 2
      }, {
        name: '列表地址参数',
        value: 3,
        key: 3
      }],
      fileTypes: [{
        name: 'Word文档',
        value: 'word',
        key: 1
      }, {
        name: 'Pdf文档',
        value: 'pdf',
        key: 2
      }, {
        name: 'Excel文档',
        value: 'excel',
        key: 3
      }],
      form: {
        templateId: this.template,
        sfcx: 'false', // 是否查询
        qxlx: 'false', // 是否权限控制
        qxzd: '', // 关联权限的字段
        xsts: 1, // 显示条数
        dataType: 1, // 数据类型
        sfsz: 'false', // 是否设置
        isMore: 'false', // 是否显示更多
        sfdsrw: 'false', // 是否定时任务
        sfzdypx: 'false', // 是否自定义排序方式
        isShowImage: 'false', // 是否显示栏目图标
        openType: 'false', // 更多页面打开地址是否外链
        orderColumn: '', // 排序字段
        orderType: 'DESC', // 排序方式
        moreUrl: '', // 更多查询地址
        jgsj: 20, // 定时任务间隔时间
        dataSource: '', // 数据源
        querySql: '', // 查询sql
        apiUrl: '', // api地址
        apiCurrentName: '', // api分页参数名称
        apiRowsName: '', // api 分页参数，每页显示条数
        requestMethod: '', // 请求方式
        contentType: '', // 请求类型
        entity: {
          parentId: this.template,
          entityType: 1, // 详情页打开方式 1、文件下载;2、文件预览;3、地址跳转；4、定制页面
          queryType: 1, // 查询方式 1、列表传参查询；2、列表传参跳转；3、列表地址参数
          entityColumn: '', // 取值字段，根据不同的打开方式代表不同的需求（querytype和entitytype）
          sfqxkz: 'false', // 是否权限控制
          sfgx: 'false', // 是否执行更新
          qxzd: null, // 关联权限的字段、即用户账号字段
          openUrl: null, // 打开地址
          fileType: '', // 文件格式
          wdlx: 1, // 文档类型
          sfyfj: 'false', // 是否有附件
          updateSql: '', // 更新sql
          dataSource: '', // 数据源
          querySql: '', // 查询详情sql
          apiUrl: '', // api相关接口地址
          requestMethod: '', // 请求方式
          contentType: '', // 请求类型
          xsrq: '', // 显示时间
          title: '', // 显示字段信息
          xsbm: '', // 显示部门名称
          xszw: '', // 正文字段
          xsyh: '', // 显示用户字段
          fwcs: ''// 访问 次数
        },
        newsFj: {
          parentId: this.template,
          fjdz: '',
          fjmc: '',
          fjlx: '',
          sfqxkz: 'false',
          qxzd: '',
          fjb: '',
          wjlx: 1,
          dataSource: '', // 数据源
          querySql: '', // 查询详情sql
          apiUrl: '', // api相关接口地址
          requestMethod: '', // 请求方式
          contentType: ''// 请求类型
        },
        xsx: [{
          title: '',
          fieId: '',
          width: '',
          enable: 'true',
          isQuery: 'false',
          key: Date.now()
        }]
      },
      defaultForm: {
        templateId: this.template,
        sfcx: 'false', // 是否查询
        qxlx: 'false', // 是否权限控制
        qxzd: '', // 关联权限的字段
        xsts: 1, // 显示条数
        dataType: 1, // 数据类型
        sfsz: 'false', // 是否设置
        isMore: 'false', // 是否显示更多
        sfdsrw: 'false', // 是否定时任务
        sfzdypx: 'false', // 是否自定义排序方式
        isShowImage: 'false', // 是否显示栏目图标
        openType: 'false', // 更多页面打开地址是否外链
        orderColumn: '', // 排序字段
        orderType: 'DESC', // 排序方式
        moreUrl: '', // 更多查询地址
        jgsj: 20, // 定时任务间隔时间
        dataSource: '', // 数据源
        querySql: '', // 查询sql
        apiUrl: '', // api地址
        apiCurrentName: '', // api分页参数名称
        apiRowsName: '', // api 分页参数，每页显示条数
        requestMethod: '', // 请求方式
        contentType: '', // 请求类型
        entity: {
          parentId: this.template,
          entityType: 1, // 详情页打开方式 1、文件下载;2、文件预览;3、地址跳转；4、定制页面
          queryType: 1, // 查询方式 1、列表传参查询；2、列表传参跳转；3、列表地址参数
          entityColumn: '', // 取值字段，根据不同的打开方式代表不同的需求（querytype和entitytype）
          sfqxkz: 'false', // 是否权限控制
          sfgx: 'false', // 是否执行更新
          qxzd: null, // 关联权限的字段、即用户账号字段
          openUrl: null, // 打开地址
          fileType: '', // 文件格式
          wdlx: 1, // 文档类型
          sfyfj: 'false', // 是否有附件
          updateSql: '', // 更新sql
          dataSource: '', // 数据源
          querySql: '', // 查询详情sql
          apiUrl: '', // api相关接口地址
          requestMethod: '', // 请求方式
          contentType: '', // 请求类型
          xsrq: '', // 显示时间
          title: '', // 显示字段信息
          xsbm: '', // 显示部门名称
          xszw: '', // 正文字段
          xsyh: '', // 显示用户字段
          fwcs: ''// 访问 次数
        },
        newsFj: {
          parentId: this.template,
          fjdz: '',
          fjmc: '',
          fjlx: '',
          sfqxkz: 'false',
          qxzd: '',
          fjb: '',
          wjlx: 1,
          dataSource: '', // 数据源
          querySql: '', // 查询详情sql
          apiUrl: '', // api相关接口地址
          requestMethod: '', // 请求方式
          contentType: ''// 请求类型
        },
        xsx: [{
          title: '',
          fieId: '',
          width: '',
          enable: 'true',
          isQuery: 'false',
          key: Date.now()
        }]
      }
    };
  },
  computed: {
    getXsx: function() {
      const newXsx = this.form.xsx.map(res => {
        res.enable = res.enable.toString();
        res.isQuery = res.isQuery.toString();
        return res;
      });
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      this.form.xsx = newXsx;
      return this.form.xsx;
    }
  },
  watch: {
    getXsx: {
      handler(newName, oldName) { // 值发生变化时
        if (newName != null && newName.length > 0) {
          this.fieIdList = newName.filter(item => item.title !== '' &&
            item.title != null && item.fieId !== '' && item.fieId != null);
        }
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: true // formType为对象时，设置为true，此属性监听对象发生变化
    },
    template: {
      handler(newName, oldName) {
        if (newName != null && undefined !== newName) {
          this.initEntity();
        }
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    }
  },
  mounted() {
    crudDataSource.queryEnable().then(res => {
      this.dataSources = res;
    }).catch(() => {
      console.log('查询数据源信息失败！');
    });
  },
  methods: {
    removeDomain(domain) {
      if (this.form.xsx.length <= 1) {
        this.$message({
          message: '最少配置一条显示项内容！',
          type: 'warning'
        });
      } else {
        var index = this.form.xsx.indexOf(domain);
        if (index !== -1) {
          this.form.xsx.splice(index, 1);
          this.$message({
            message: '删除成功！',
            type: 'success'
          });
        }
      }
    },
    addDomain() {
      this.form.xsx.push({
        title: '',
        fieId: '',
        width: '',
        enable: 'true',
        isQuery: 'false',
        key: Date.now()
      });
    },
    initEntity() {
      adminQueryTemplate({ 'tid': this.template }).then(res => {
        if (res != null && res !== '') {
          this.form = res;
          this.form.sfcx = this.form.sfcx.toString();
          this.form.qxlx = this.form.qxlx.toString();
          this.form.sfsz = this.form.sfsz.toString();
          this.form.isMore = this.form.isMore.toString();
          this.form.sfdsrw = this.form.sfdsrw.toString();
          this.form.sfzdypx = this.form.sfzdypx.toString();
          this.form.isShowImage = this.form.isShowImage.toString();
          this.form.openType = this.form.openType.toString();
          this.form.entity.sfqxkz = this.form.entity.sfqxkz.toString();
          this.form.entity.sfgx = this.form.entity.sfgx.toString();
          this.form.entity.sfyfj = this.form.entity.sfyfj.toString();
          this.form.newsFj.sfqxkz = this.form.newsFj.sfqxkz.toString();
        } else {
          this.form = this.defaultForm;
        }
      });
    },
    saveEntity() {
      this.loading = true;
      adminSaveOrUpdate(this.form).then(res => {
        this.$message({
          message: '配置项保存成功！',
          type: 'success'
        });
        this.loading = false;
      }).catch(() => {
        this.$message.error('保存失败！请联系系统管理员！');
        this.loading = false;
      });
    }
  }
};
</script>

<style scoped>
.custom-button {
  width: 100%;
  height: 40px;
  text-align: center;
}
</style>
